<template>
	<view class="diy-main">
		<!-- 旅游 -->
		<view class="travel">
			<image
				:src="traveList[0].bannerImg || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/weekend.png'"
				@click="toPage(traveList[0].linkValue)"
				mode="scaleToFill"
				class="weekend-img"
			/>
			<image
				:src="traveList[1].bannerImg || 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/travel.png'"
				@click="toPage(traveList[1].linkValue)"
				mode="scaleToFill"
				class="travel-img"
			/>
		</view>
		<!-- 近期师训 -->
		<view class="info">
			<view class="info-des">
				<view class="label">
					<text>近期研学</text>
					<view class="shadow"></view>
				</view>
				<view class="des">
					<text>行万里跨学科之路</text>
					<view class="point">
						<view class="trangle"></view>
					</view>
				</view>
			</view>
			<view class="info-list">
				<view class="list_item" v-for="(item, index) in teach" :key="index" @click="toTeach(item)">
					<image :src="item.coverImage" mode="widthFix" class="list_img"></image>
					<view class="list_text">
						<view class="title">{{ item.goodsName }}</view>
						<view class="num">
							<view>{{ item.salesAmount }}人感兴趣</view>
						</view>
						<view class="price">
							<text class="price_num">{{ item.price }}</text>
							<text>元起</text>
						</view>
					</view>
				</view>
				<view v-if="teach.length == 0" style="margin-top: 30rpx; width: 100%; text-align: center">暂无数据</view>
			</view>
		</view>
		<!-- 网课视频 -->
		<view class="info">
			<view class="info-des">
				<view class="label">
					<text>网课视频</text>
					<view class="shadow"></view>
				</view>
				<view class="des">
					<text>读万卷求知之书</text>
					<view class="point">
						<view class="trangle"></view>
					</view>
				</view>
			</view>
			<view class="test">
				<image
					v-for="(t, idx) in matchList"
					:key="idx"
					:src="t.bannerImg"
					@click="toPage(t.linkValue)"
					mode="scaleToFill"
					class="contest"
				/>
				<view v-if="matchList.length == 0" style="margin-top: 30rpx; width: 100%; text-align: center">暂无数据</view>
			</view>
		</view>

		<!-- 文创产品 -->
		<view class="info">
			<view class="info-des">
				<view class="label">
					<text>文创产品</text>
					<view class="shadow"></view>
				</view>
				<view class="des">
					<text>发掘更多有趣文创</text>
					<view class="point">
						<view class="trangle"></view>
					</view>
				</view>
			</view>
			<view class="product_list">
				<view class="list_item" v-for="(item, index) in productList" :key="index" @click="toProduct(item)">
					<image :src="item.coverImage" class="list_img"></image>
					<view class="list_text">
						<view class="title">
							<text>{{ item.goodsName }}</text>
						</view>
						<view class="bottom">
							<view class="price">
								<text class="price_num">￥{{ item.price }}</text>
							</view>
							<view class="btn">
								<text>立即购买></text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="productList.length == 0" style="margin-top: 30rpx; width: 732rpx; text-align: center">暂无数据</view> -->
				<view v-if="productList.length == 0" style="width: 710rpx; text-align: center">
					<image
						style="width: 500rpx"
						mode="widthFix"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import indexApi from '@/api/yanxue/indexPage'
export default {
	data() {
		return {
			traveList: [],
			matchList: [],
			teach: [],
			productList: []
		}
	},
	created() {
		this.getRecommend()
		this.getTeach()
		this.getTravelmatch()
	},
	methods: {
		toPage(url) {
			// return;
			if (url == '') return
			this.$navTo(url)
		},

		toTeach(item) {
			this.$navTo('pagesA/teach/teach_detail?id=' + item.id)
		},
		toProduct(item) {
			this.$navTo('pagesA/cultural/cultural_detail?id=' + item.id)
		},
		// 推荐文创
		getRecommend() {
			indexApi.getRecommend().then(res => {
				this.productList = res.result.list
			})
		},
		// 师训
		getTeach() {
			indexApi.getGoodsList({ categoryId: 2 }).then(res => {
				this.teach = res.result.list
			})
		},

		// 旅游比赛
		getTravelmatch() {
			indexApi.getBanner().then(res => {
				this.traveList = res.result.list2
				this.matchList = res.result.list3
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.diy-main {
	margin-top: 28rpx;
	padding: 0 24rpx;
	background-color: #fff;
	.travel {
		position: relative;
		display: flex;
		justify-content: flex-start;
		.weekend-img {
			width: 250rpx;
			height: 266rpx;
			margin-right: 10rpx;
			margin-top: 16rpx;
		}
		.travel-img {
			width: 466rpx;
			height: 270rpx;
		}
	}
	.info {
		margin-top: 46rpx;
		.info-des {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.label {
				position: relative;
				text {
					font-family: HarmonyOS Sans SC;
					font-weight: 900;
					font-size: 38rpx;
					color: #000000;
					z-index: 100;
				}
				.shadow {
					margin-top: -12rpx;
					z-index: 99;
					width: 100%;
					height: 8rpx;
					background: #a2ff00;
				}
			}
			.des {
				display: flex;
				align-items: center;
				text {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					transform: scale(0.916667);
					color: #747474;
				}
				.point {
					position: relative;
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
					background-color: #a2ff00;
					border-radius: 50%;

					.trangle {
						position: absolute;
						top: 2rpx;
						// left: 1rpx;
						// transform: translate(-50%, -50%);
						width: 0;
						height: 0;
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid transparent;
						border-bottom: 13.856rpx solid #fff;
						transform: rotate(270deg);
					}
				}
			}
		}
		.info-list {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			overflow-x: scroll;
			.list_item {
				display: flex;
				align-items: top;
				justify-content: flex-start;
				margin-right: 24rpx;
				.list_img {
					width: 130rpx;
					height: 172rpx !important;
					margin-right: 12rpx;
				}
				.list_text {
					width: 172rpx;
					.title {
						font-family: HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #000000;
						height: 64rpx;
						// 超出2行显示省略号
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 32rpx;
					}
					.num {
						font-family: HarmonyOS Sans SC;
						color: #353535;
						width: 100%;
						text-align: center;
						height: 28rpx;
						line-height: 28rpx;
						background-color: #e9e9f0;
						border-radius: 28rpx;
						margin-top: 10rpx;
						view {
							font-size: 24rpx;
							transform: scale(0.75);
						}
					}
					.price {
						font-family: HarmonyOS Sans SC;
						font-size: 24rpx;
						margin-top: 10rpx;
						color: #000;
						.price_num {
							font-size: 48rpx;
							color: #f95513;
							margin-right: 4rpx;

							font-weight: bold;
						}
					}
				}
			}
		}
		.test {
			display: flex;
			justify-content: space-between;
			margin-top: 18rpx;
			.contest {
				width: 346rpx;
				height: 204rpx;
			}
		}
		.product_list {
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 16rpx;
			.list_item {
				width: 344rpx;
				height: 430rpx;
				background: #f95513;
				border-radius: 20rpx;
				float: left;
				display: inline-block;
				padding: 14rpx;
				.list_img {
					width: 316rpx !important;
					height: 316rpx !important;
					display: block;
				}
				.list_text {
					.title {
						text {
							font-size: 24rpx;
							font-family: HarmonyOS Sans SC;
							color: #ffffff;
							transform: scale(0.833333);
							display: block;
							width: 115%;
							margin-left: -36rpx;
							// 单行超出显示省略号
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 14rpx;
						.price {
							.price_num {
								font-family: HarmonyOS Sans SC;
								font-size: 26rpx;
								color: #ffffff;
							}
						}
						.btn {
							width: 114rpx;
							height: 34rpx;
							background: #a2ff00;
							border-radius: 18rpx;
							text {
								font-family: HarmonyOS Sans SC;
								font-size: 24rpx;
								color: #f95513;
								text-align: center;
								line-height: 34rpx;
								transform: scale(0.75);
								display: block;
							}
						}
					}
				}
			}
		}
	}
}
</style>
